<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>
    <div style="height: 1000px;"></div>
    <script>
        /*
            事件对象
                当触发某个事件时，会产生一个事件对象（浏览器创建的），
                这个对象包含着所有与事件有关的信息 。包括导致事件的元素（事件源）、事件的类型、以及其它与特定事件相关的信息。

              事件对象的获取  
                通过事件绑定的执行函数是可以得到一个隐藏参数的 。
                    说明，浏览器会自动分配一个参数，这个参数其实就是 event 对象。
        
        */
        var btn = document.querySelector("#btn");
        // 事件处理函数，是浏览器 监听到 用户点击了这个按钮，就会执行 按钮的onclick属性
        // 事件发生的时候 ，浏览器还创建了一个事件对象，记录这个事件的相关信息
        // var event = {type:'click',target:btn,....}
        // btn.onclick(event)
        // target
        // clientX Y  --相对窗口
        // pageX  pageY--相对页面
        // offsetX offsetY -- 相对事件源
        btn.onmousedown = function (evt) {
            // 事件处理函数的形参 就是事件对象（标准的获取方法）
            window.event//ie 以前使用这个全局变量保存事件触发那一刻的信息
            console.log(event);

            // 兼容性 获取事件对象(了解)
            var e = evt || window.event;
            // if(evt){
            //     e  = evt 
            // }else{
            //     e = window.eval
            // }



            console.log(evt, '点击了按钮');
            console.log(evt.target);//事件源--触发事件的元素*****
            console.log(evt.type);//事件类型


            // event.button属性
            // 当前事件触发时哪个鼠标按键被点击（onmousedown  0 左键 1 滚轮 2 右键）
            console.log(evt.button);
            // screenX、screenY属性
            // 鼠标在屏幕区X坐标和Y坐标，即距离左屏幕和上屏幕的距离

            console.log(evt.screenX);
            console.log(evt.screenY);


            // clientX、clientY属性***
            // 鼠标在可视区（窗口）X坐标和Y坐标，即距离左边框和上边框的距离
            console.log(evt.clientX, evt.clientY);



            // offsetX、offsetY属性**
            // 鼠标相对于事件源的X坐标和Y坐标
            console.log(evt.offsetX, evt.offsetY);


            // pageX、pageY ****
            // 鼠标相对于文档的X坐标和Y坐标
            // 相对于页面的evt.pageY= evt.clientY + 滚动距离 document.docuemntElement.scrollTop
            console.log(evt.pageX, evt.pageY);


            // target  事件源  var target =  evt.target || evt.srcElement;--ie上兼容写法
        }



    </script>

</body>

</html>